<template>
	<div class="hot-part">
		<div class="hot-head">热门主题</div>
		<div class="hot-list">
			<div class="hot-item" v-for="(item, index) in hotList" :key="index">
				<div class="ind" :class="item.class">{{ index+1 }}</div>
				<div class="title">{{ item.title }}</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Hot',
	data() { 
		return {
			//热门主题
			hotList: []
		}
	},
	mounted() { 
		this.queryHotData();
	},
	methods: {
		/**
		 * 查询热门主题数据
		 */
		 queryHotData() { 
			let dataList = [
				{ id: 1, title: '长沙高新区招聘简章', class: 'first' },
				{ id: 2, title: '【绿盟科技】2019年秋季校园招聘', class: 'second'  },
				{ id: 3, title: '咪咕音乐有限公司 2021 届秋季校园招聘 火热开启', class: 'third'  },
				{ id: 4, title: '恒生2018校园招聘宣讲会（武汉站）' },
				{ id: 5, title: '武汉大学传奇人物' },
				{ id: 6, title: '2018年中邮消费金融有限公司校园招聘简章' },
				{ id: 7, title: '与农信 共蝶变 ——浙江农信2019校园招聘正式启动' },
				{ id: 8, title: '我校2020年本科招生录取工作圆满结束' },
				{ id: 9, title: '“珞珈一号01星”项目获测绘科学技术特等奖' },
				{ id: 10, title: '长沙高新区招聘简章' },
			];
			this.hotList = dataList;
		}
	}
}
</script>

<style lang="scss" scoped>
.hot-part {
	width: 100%;
	padding-left: 15px;
	.hot-head {
		font-size: 14px;
		font-weight: bold;
		padding-bottom: 15px;
		border-bottom: 2px solid #c3d5c4;
	}
	.hot-list {
		width: 100%;
		.hot-item {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			.ind {
				font-size: 16px;
				width: 30px;
				font-style: italic;
				color: #999;
				&.first {
					color: #bc0614;
				}
				&.second {
					color: #ff6600;
				}
				&.third {
					color: #ffcc00;
				}
			}
			.title {
				width: calc(100% - 30px);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #2965B1;
			}
		}
	}
}
</style>